<template>
  <div id="login-head" style="padding: 10px">
    <img src="@/assets/img/logo.png" height="50" style="margin-left: 20%" />
  </div>
  <div id="login-root">
    <!-- <div id="login-root-img"></div> -->
    <img src="../assets/img/l_bg1.png" />
    <div style="display: flex; height: 100%; align-items: center">
      <login-card v-if="cmp === 'login-card'" @regedit="regedit"/>
      <register-card v-else @login="login" />
    </div>
  </div>
  <div style="text-align: center">
    <img src="@/assets/img/底部icon.png" width="800" />
    <hr style="width: 830px" />
  </div>
</template>

<script>
import LoginCard from '@/components/LoginCard.vue'
import RegisterCard from '../components/RegisterCard.vue';
export default {
  components: {
    LoginCard,
    RegisterCard
  },
  data:() => ({
    cmp: 'login-card'
  }),
  methods: {
    regedit() {
      this.cmp = "register-card"
    },
    login() {
      this.cmp = "login-card"
    }
  }
};
</script>

<style scoped>
#login-root {
  position: relative;
  background-repeat: no-repeat;
  width: 100%;
  height: 613px;
  background-image: url("../assets/img/l_bg.png");
  display: flex;
  justify-content: space-around;
  overflow: hidden;
}

#login-head {
  background-color: #303a40;
}
</style>